<template>
  <view class="index">
            
   <view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
       
		<home></home>
		
      </scroll-view>
    </view>
	
    <view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        
		<custom @success="customSuccess"></custom>
      </scroll-view>
    </view>
    <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
       <view>
		 
		   
	   </view>
	  
      </scroll-view>
    </view>
	
    
    
    <tn-tabbar
      v-model="currentIndex"
	  :height="112"
      :list="tabbarList"
      activeColor="#3B54DA"
      inactiveColor="#505050"
      activeIconColor="#3B54DA"
	  iconSize="36"
      :animation="true"
      :safeAreaInsetBottom="true"
      @change="switchTabbar"
	  @contact="contact"
    ></tn-tabbar>
	<myCommonSkeletonVue :showSkeleton="showSkeleton"></myCommonSkeletonVue>
  </view>
</template>

<script>
  import home from '../home/home.vue'
  import custom from '../custom/index.vue'
  import pageShowOrHideMixin from '@/common/mixin/pageShowOrHideMixin'
  import myCommonSkeletonVue from "@/components/my-componets/my-common-skeleton.vue";
  export default {
	  mixins:[pageShowOrHideMixin],
    components: {
      home,
	  custom,
      myCommonSkeletonVue
    },
    data() {
      return {
        // 底部tabbar菜单数据
		showSkeleton:true,
        tabbarList: [
          {
            title: '首页',
            activeIcon: '/static/home/home-active.png',
            inactiveIcon: '/static/home/home.png',
			iconSize:'40'
			
          },
          {
            title: '专属定制',
            activeIcon: '/static/home/custom-active.png',
            inactiveIcon: '/static/home/custom.png',
			iconSize:'40'
          },
          {
            title: '智能客服',
            activeIcon: '/static/home/kefu-active.png',
            inactiveIcon: '/static/home/kefu.png',
			iconSize:'40',
			contact:true
          },
          
        ],
        // tabbar当前被选中的序号
        currentIndex: 0,
        // 自定义底栏对应页面的加载情况
        tabberPageLoadFlag: []
      }
    },
    onLoad(options) {
      const index = options&&Number(options.index || 0)||0
      // 根据底部tabbar菜单列表设置对应页面的加载情况
      this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
        return index === tabbar_index
      })
      this.switchTabbar(index)
	  let launchOptions = uni.getLaunchOptionsSync();
	  if(launchOptions.query && launchOptions.query.url) {
		  //只适合二级页面
		let url = launchOptions.query.url;
	  	uni.navigateTo({
	  		url: "/"+url,
		})
	  } else {
		  this.showSkeleton = false;
	  }
	  
	  console.log('onLoad index home',launchOptions,options,getCurrentPages())
	  
	 
    },
	onShow(){
		console.log('showwwwww index home')
		this.currentPath = '/pages/index/index';
		this.sendToServerOnShow();
	},
	onHide(){
		this.showSkeleton = false;
	},
    methods: {
		customSuccess(index){
			this.switchTabbar(0);
		},
		contact(e){
			console.log('qqqqqqq',e)
			if(!e.detail.path) {
				//直接退出的
				 this.switchTabbar(0);
			}
		},
      // 切换导航
      switchTabbar(index) {
        this._switchTabbarPage(index)
      },
      
      
      // 导航页面滚动到底部
      tabbarPageScrollLower(e) {
      },
      
      // 切换导航页面
      _switchTabbarPage(index) {
        const selectPageFlag = this.tabberPageLoadFlag[index]
        if (selectPageFlag === undefined) {
          return
        }
        if (selectPageFlag === false) {
          this.tabberPageLoadFlag[index] = true
        }
        this.currentIndex = index
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  .index {
    overflow: hidden;
    height: 100%;
	/deep/.tn-modal__box{
		padding:0!important;
	}
  }
  
  .custom-tabbar-page {
    height: calc(100vh - (112rpx + env(safe-area-inset-bottom)));
	
  }

</style>
